<template>
  <div>
    <!-- 表头 -->
    <el-page-header @back="goBack" :content="content"> </el-page-header>
    <!-- 表单 -->
    <!-- {{form}} -->
    <el-form size="small" ref="form" :model="form" label-width="80px">
      <!-- <el-form-item label="用户名字">
        <el-input v-model="form.username"></el-input>
      </el-form-item> -->
      <el-form-item
        label="编号"
        prop="id"
        :rules="[
          { required: true, message: '编号不能为空，编号必须为数字值'},
          { type: 'number', message: '编号必须为数字值'},
          
        ]"
      >
      <el-input type="number" v-model.number="form.id" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <!-- <el-form-item label="用户编号">
        <el-input v-model="form.id"></el-input>
      </el-form-item> -->
      <el-form-item
        prop="email"
        label="邮箱"
        :rules="[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item
        label="电话"
        prop="telephone"
        :rules="[
          { required: true, message: '电话不能为空'},
        ]"
      >
      <el-input type="number" v-model.number="form.telephone"></el-input>
      </el-form-item>
      <el-form-item label="用户等级">
        <el-input v-model="form.realname"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="form.gender"></el-input>
      </el-form-item>
      <!-- <el-form-item label="用户生日">
        <el-input v-model="form.birth"></el-input>
      </el-form-item> -->
      
      <el-form-item label="用户地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
      
      <!-- <el-form-item label="电话">
        <el-input v-model="form.telephone"></el-input>
      </el-form-item> -->
      
      <el-form-item>
        <div style="text-align:right">
          <el-button type="primary" @click="submitHandler('form')">提交</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { post } from '@/utils/request'
export default {
  data(){
    return {
      content:"新增用户信息",
      form:{}
    }
  },
  methods:{
    // 提交
    submitHandler(Form){
      this.$refs[Form].validate((valid) => {
          if (valid) {
            let url = "http://localhost:8888/BaseUser/saveOrUpdate"
            console.log(this.form)
            post(url,this.form).then(resp =>{

            // console.log(resp);
            // 提示
            this.$message({type:"success",message:resp.message})
            // 返回列表页面
            this.goBack();
          })
          } else {
            alert('错误输入');
            return false;
          }
        });
    },
    // 返回
    goBack(){
      this.$router.go(-1)
    }
  },
  created(){
    // 页面加载出来的时候，将路由中的参数拿到，放到this.form 中
    this.form = this.$route.query;
  }
}
</script>
<style lang="sass" scoped>

</style>